<template>
  <div class="container">
    <!-- 标题部分 -->
    <div class="title" style="line-height: 24px;font-size: 22px;text-align: left;display: flex">
      <h1><span style="font-size: 18px;"> 店铺名称：</span>{{ maimaiChunithm.shopName }}</h1>
      <h1 style="margin-left: 20px">
        <div>
          <el-icon>
            <View/>
          </el-icon>
          <span>{{ maimaiChunithm.contentView }}</span></div>
      </h1>
    </div>

    <!-- 作者及更新时间 -->
    <div class="section">
      <div class="section-title">基本信息</div>
      <div class="section-content">
        <p style="text-indent: 5px;">作者：{{ maimaiChunithm.contentAuthor }}</p>
        <p style="text-indent: 5px;">创建时间：{{ maimaiChunithm.contentCreateTime }}</p>
        <p style="text-indent: 5px;">更新时间：{{ maimaiChunithm.contentUpdateTime }}</p>
      </div>
    </div>

    <!-- 游戏信息 -->
    <div class="section">
      <div class="section-title">游戏信息</div>
      <div class="section-content">
        <p style="text-indent: 5px;">游戏分类：{{ maimaiChunithm.gameCategory }}</p>
        <p style="text-indent: 5px;">游戏价格：{{ maimaiChunithm.gamePrice }}</p>
      </div>
    </div>

    <!-- 游戏描述 -->
    <div class="section">
      <div class="section-title">游戏描述</div>
      <div class="section-content">
        <p style="text-indent: 5px;">游戏描述：{{ maimaiChunithm.gameDescription }}</p>
        <p style="text-indent: 5px;">游戏指引位置：{{ maimaiChunithm.gameGuidePosition }}</p>
      </div>
    </div>

    <!-- 图片展示 -->
    <div class="section">
      <div class="section-title">相关图片</div>
      <div class="img">
        <div v-if="maimaiChunithm.contentImage && maimaiChunithm.contentImage.length > 0" style="margin-top: 20px">
          <el-image
              v-for="(image, index) in maimaiChunithm.contentImage"
              :key="index"
              :alt="`图片${index + 1}`"
              :initial-index="index"
              :preview-src-list="maimaiChunithm.contentImage"
              :src="image"
              class="image-item"
              fit="cover"
          />
        </div>
        <div v-else>
          <p style="text-indent: 5px;">暂无图片</p>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="buttons">
      <el-button type="primary" @click="Edit">编辑</el-button>
      <el-button type="danger" @click="Delete">删除</el-button>
    </div>

    <!-- 编辑记录 -->
    <div class="section" style="margin-top: 20px;">
      <div class="section-title">编辑记录</div>
      <el-collapse v-model="activeNames" style="margin-top: 20px;">
        <el-collapse-item name="1" title="点击展开/收起">
          <div class="edit-record">
            <div
                v-for="(edit, index) in recentEdit"
                :key="index"
                class="edit-item"
            >
              {{ edit.updateEditor }} 于 {{ edit.updateTime }} 编辑了 {{ edit.updateOperation }} 部分
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 评论区 -->
    <div class="section" style="margin-top: 20px;">
      <div class="section-title">评论区</div>
      <el-collapse v-model="activeNames" style="margin-top: 20px;">
        <el-collapse-item name="2" title="点击展开/收起">
          <CommentList/>
          <CommentBox/>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.ts";
import CommentBox from "@/views/Comment/CommentBox.vue";
import CommentList from "@/views/Comment/CommentList.vue";
import {View} from "@element-plus/icons-vue";

export default {
  components: {View, CommentList, CommentBox},
  data() {
    return {
      contentId: "",
      maimaiChunithm: {
        contentImage: [], // 初始化为数组
      },
      activeNames: [],
      currentUser: "",
      recentEdit: [], // 编辑记录
      isMounted: true,
      timer: null,
    };
  },
  mounted() {
    this.contentId = this.$route.query.mcId; // 获取路由参数 mcId
    console.log(this.contentId);
    this.currentUser = localStorage.getItem("username");
    this.getMaimaiChunithmData();
    this.getMaimaiChunithmRecentEdit();
    this.timer = setTimeout(this.addView, 5000);
  },
  unmounted() {
    clearTimeout(this.timer);
    this.isMounted = false;
  },
  methods: {
    addView: function () {
      if (!this.isMounted) {
        console.log("组件已卸载，不再增加浏览量");
        return;
      }
      axios.post("/maimaiChunithm/addView/" + this.contentId).then((res) => {
        console.log(res.data.data);
      }).catch((error) => {
        ElMessage.error(error);
      });
    },
    getMaimaiChunithmData: function () {
      axios.get(`/maimaiChunithm/get/` + this.contentId).then((res) => {
        this.maimaiChunithm = res.data.data;

        // 如果 contentImage 是 JSON 字符串，解析为数组
        if (typeof this.maimaiChunithm.contentImage === "string") {
          try {
            this.maimaiChunithm.contentImage = JSON.parse(this.maimaiChunithm.contentImage);
          } catch (error) {
            console.error("解析 contentImage 失败:", error);
            this.maimaiChunithm.contentImage = []; // 解析失败时设置为空数组
          }
        }
      }).catch((error) => {
        ElMessage.error("获取数据失败：" + error.message);
      });
    },
    getMaimaiChunithmRecentEdit: function () {
      axios.get(`/recentEdit/maimaiChunithm/` + this.contentId).then((res) => {
        this.recentEdit = res.data.data;
      }).catch((error) => {
        ElMessage.error("获取编辑记录失败：" + error.message);
      });
    },
    Edit: function () {
      router.push({
        path: "/editMaimaiChunithm",
        query: {
          mcId: this.contentId,
        },
      });
    },
    Delete: function () {
      ElMessageBox.confirm(
          "此操作将永久删除该条目，是否继续？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).then(() => {
        if (this.maimaiChunithm.contentAuthor !== this.currentUser) {
          ElMessage.error("您不是该内容的创建者，无法删除");
          return;
        }
        axios.delete(`/maimaiChunithm/delete/` + this.contentId).then((res) => {
          ElMessage.success("已删除");
          router.push("/maimaiChunithmList");
        }).catch((error) => {
          ElMessage.error("删除失败：" + error.message);
        });
      }).catch(() => {
        ElMessage.info("已取消删除");
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section {
  border-top: 2px solid #181818;
  border-radius: 0;
  padding: 10px;
  position: relative;
  margin-bottom: 10px;
}

.section-title {
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  top: -15px;
  left: 40px;
  background-color: #e9eef3;
  padding: 5px;
  border-radius: 5px;
  line-height: 22px;
}

.section-content {
  font-size: 20px;
  line-height: 24px;
}

.section-content p {
  text-indent: 5px;
  text-align: left;
}

.img {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 2px;
}

.buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.edit-record,
.comment-list {
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.edit-item {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #f0f8ff;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  line-height: 1.2;
  font-size: 14px;
}

/* 暗黑模式下的样式 */
[data-theme="dark"] .container {
  background-color: black; /* 容器背景变为深灰色 */
  color: white; /* 字体变为白色 */
}

[data-theme="dark"] .section {
  border-top-color: white; /* 边框变为白色 */
}

[data-theme="dark"] .section-title {
  background-color: black; /* 标题背景变为深灰色 */
  color: white; /* 标题字体变为白色 */
}

[data-theme="dark"] .section-content {
  background-color: black; /* 内容背景变为深灰色 */
  color: white; /* 内容字体变为白色 */
}

[data-theme="dark"] .img {
  border: 1px solid white; /* 图片边框变为白色 */
}

[data-theme="dark"] .buttons {
  background-color: black; /* 按钮容器背景变为深灰色 */
}

[data-theme="dark"] .buttons .el-button {
  background-color: black; /* 按钮背景变为深灰色 */
  color: white; /* 按钮字体变为白色 */
}

[data-theme="dark"] .buttons .el-button:hover {
  background-color: black; /* 按钮悬停背景变为深灰色 */
}

[data-theme="dark"] .edit-record,
[data-theme="dark"] .comment-list {
  background-color: black; /* 编辑记录和评论区背景变为深灰色 */
  border-color: white; /* 边框变为白色 */
  color: white; /* 字体变为白色 */
}

[data-theme="dark"] .edit-item {
  background-color: #555; /* 编辑记录项背景变为深灰色 */
  border-color: white; /* 边框变为白色 */
  color: white; /* 字体变为白色 */
}
</style>